<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>PanFeel: Feel the world's conversation</title>
      
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAARvfUnEqtbr2okAFN4VM9dxQ0gQhcEzFn9Gu-SY_mVD4qOXbyqxSRxhXB_SmX-9eAANW4wEZrQvuvwA" type="text/javascript"></script> 
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    var map;

    function loadMap() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("containermap"));
            map.setCenter(new GLatLng(38.8920910, -77.0240550), 2);
            map.addControl(new GLargeMapControl());
        }
    }

    function doSubmit() {
    	 var tid = document.twitter.name.value;
    	 var pwrd = document.twitter.pword.value;

    	 $.getJSON("locatetwitterer.groovy", {"username": tid, "password":pwrd}, function(json) {
    	  if(json.length > 0){
    	   map.setCenter(new GLatLng(json.latitude, json.longitude), 2);
    	  }
    	 });
    	}
    
    function doSubmit2() {
   	 var tid = document.twitter.name.value;
   	 var pwrd = document.twitter.pword.value;

    $.getJSON("locatefriends.groovy", {"username": tid, "password":pwrd}, function(json) {
     $.each(json.friends, function(i, item) {
      var marker = new GMarker(new GLatLng(item.latitude, item.longitude));
      map.addOverlay(marker)
      var picture = "<img src=\"" + item.pic + "\"/> " + item.name + "<br/>" + item.bio
      
      GEvent.addListener(marker, "click", function() {
       marker.openInfoWindowHtml(picture);
      });
     });
    });
    }
    
    //]]>
    </script>
     <style type="text/css"> 
           #containermap {
		    position: absolute;
		    margin: 5px 0px 0px 210px;
		    height: 650px;
		    width: 1000px;
		}      
        </style> 
  </head>
  <body onload="load()" onunload="GUnload()">
  <div id="containermap"></div>
  <div id="map" style="width:800px;height:500px"></div>
  <div id="container">
  <div class="form">
  <form action="" name="twitter">
   <p><label>twitter id:</label><input class="name" type="text" size="12"
       id="name" name="name" value=""/></p>
   <p><label>password:</label><input class="pword" type="password" size="12"
     id="pword" name="pword" value=""/></p>

    <div class="buttnz">
     <a href="javascript: doSubmit();">Map my friends!</a>
    </div>
   </form>
  </div>
 </div>
  </body>
</html>